<template>
  <div>
    <h1>总价：{{ totalPrice }}</h1>
    <ul v-for="item in cartlist" :key="item.id">
      <li style="width: 100px; height: 100px">
        <image-view :src="item.img" :round="false"></image-view>
        <!-- <img :src="item.img" alt="" /> -->
      </li>
      <li>{{ item.price }}</li>
      <li>
        <button @click="handleAddItem(item)">+</button>
        {{ item.count }}
        <button @click="handleReduceItem(item)">-</button>
      </li>
    </ul>

    <!-- cart
    {{ list }}
    <v-touch v-on:swipeleft="onSwipeLeft" @swiperight="onSwiperRight">
      <div ref="swiper" class="cart-item">Swipe me!</div>
    </v-touch> -->
  </div>
</template>

<script>
import ImageView from '../components/ImageView.vue'
// 如何在组件中，获取vuex中state的值？
// 答案：需要借助组件中的计算属性
// 拿取vuex中计算属性的值，需要借助组件的计算属性computed
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  components: { ImageView },
  computed: {
    ...mapState({
      list: (state) => state.cart.list,
      cartlist: (state) => state.cart.cartList,
    }),
    ...mapGetters(['totalPrice']),
    // list() {
    //   // 在组件中获取vuex中的值
    //   return this.$store.state.cart.list
    // },
    // cartlist() {
    //   return this.$store.state.cart.cartList
    // },
    // totalPrice() {
    //   return this.$store.getters.totalPrice
    // },
  },
  methods: {
    ...mapMutations(['add_item', 'reduce_item']),
    // ...mapActions([]),
    // ++
    handleAddItem(item) {
      // this.$store.commit('add_item', item)
      this.add_item(item)
    },
    // --
    handleReduceItem(item) {
      // this.$store.commit('reduce_item', item)
      this.reduce_item(item)
    },
    onSwipeLeft() {
      this.$refs.swiper.style.transform = 'translate(-100px, 0)'
      console.log(this.$refs.swiper.style.transform)
      console.log('left')
    },
    onSwiperRight() {
      this.$refs.swiper.style.transform = 'translate(0, 0)'
    },
  },
}
</script>

<style lang="scss" scoped>
.cart-item {
  height: 2rem;
  background: lightblue;
  transition: transform 0.5s;
}
</style>
